<template>
  <el-row >
    <el-col :span="8">
      <el-card shadow="always" class="c-el-row">
        <div slot="header" class="clearfix" >
          <i class="el-icon-edit"> 子 终 端 详 细 信 息</i>
        </div>
        <el-row>
          <el-col :span="20">
            <p>终端识别码： {{showingTableElement.scode}}</p>
            <p>终端详细信息： {{showingTableElement.sdetails}}</p>
            <p>经度：{{showingTableElement.slongitude}} 纬度：{{showingTableElement.slatitude}}</p>
            <p>隶属主机账号：{{showingTableElement.serverAccount}} </p>
            <p>创建时间：{{showingTableElement.createTime}}</p>
            <p>最新更新时间：{{showingTableElement.updateTime}}</p>
          </el-col>
          <el-col :span="4">
            <el-button type="danger" icon="el-icon-delete" circle style="float: right"></el-button>
          </el-col>
        </el-row>
        <el-tabs type="card" :stretch="true" :before-leave="changeLabel">
          <el-tab-pane label="最近销售记录" name="first">
            <div id="leftCharts" class="charts-style"></div>
          </el-tab-pane>
          <el-tab-pane label="商品销售量比例" name="second">
            <div id="centerCharts" class="charts-style"></div>
          </el-tab-pane>
          <el-tab-pane label="商品销售额" name="third">
            <div id="rightCharts" class="charts-style"></div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div id="el-map-container" class="c-el-row"
           style="background-color: #fdfff2"></div>
    </el-col>
  </el-row>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
      name: "map",
      data(){
        return {
          map: null,
          tableData:[],
          showingTableElement: {},
          // 模块左部对应的模块销售记录
          leftCharts: null,
          // 模块中间对应的商品销售比
          centerCharts: null,
          // 模块右边对应的商品销售量
          rightCharts: null,
          servePosition: {
            longitude: '',
            latitude: '',
            detail:''
          }
        }
      },
      methods:{
        initMap: function () {
          this.map = new AMap.Map("el-map-container",{
            center: [this.servePosition.longitude, this.servePosition.latitude],
            zoom: 16
          });

        },
        // 子服务器表单显示的查询方法
        clientFinderFunc: function () {
          var win = this;
          var param = new FormData();
          param.append("serve-account", JSON.parse(window.sessionStorage.getItem("user")).userName);
          this.$http.post("/api/subsystem/obtain", param).then(function(response){
            if(response.data !== null){
              win.tableData = response.data;
              // alert(response.data.length);
              // 循环将子模块的点标记
              for (let i = 0; i < response.data.length; i++) {
                // alert(response.data[i].slongitude+" " + response.data[i].slatitude);
                let marker = new AMap.Marker({
                  icon: new AMap.Icon({
                    image: require('../../assets/poi-marker-red.png'),
                  }),
                  position: [response.data[i].slongitude, response.data[i].slatitude],
                });
                // 为覆盖物添加点击事件
                marker.on('click',function(){
                  win.showingTableElement = response.data[i];
                });
                win.map.add(marker);
              }
            }
          });
        },
        changeLabel(activeName, oldActiveName){
          if(this.showingTableElement.scode === null ||this.showingTableElement.scode ===  undefined){
            this.$message.warning("请先选择子模块");
            return;
          }
          if(activeName === 'first'){
            this.obtainLeftCharts(this.showingTableElement.scode)
          }
          if (activeName === 'second'){
            this.obtainCenterCharts(this.showingTableElement.scode)
          }
          if(activeName === 'third'){
            this.obtainRightCharts(this.showingTableElement.scode)
          }
        },
        obtainLeftCharts(serverCode){
          // 显示标题，图例和空的坐标轴
          this.leftCharts = echarts.init(document.getElementById('leftCharts'));
          let user = JSON.parse(window.sessionStorage.getItem("user"));
          let form = new FormData;
          let win = this;
          form.append("account", user.userName);
          form.append("server-code", serverCode);
          this.$http.post("/api/history/obtain/history/line", form).then(function (response) {
            if(response.data !== null){
              win.leftCharts.setOption({
                title: {
                  text:'最近模块售销记录'
                },
                tooltip: {},
                legend: {
                  top: 'bottom'
                },
                dataset:{
                  dimensions:[
                    {name: 'createTime'},
                    {name: 'coPrice'},{name:'coStock'}, {name:'coInput'}
                  ],
                  source:  response.data
                },
                xAxis: {
                  type: 'category',
                },
                yAxis: {
                  type: 'value'
                },
                series:[
                  {name:'销售额',type: 'line'},
                  {name:'销售量',type: 'line'},
                  {name:'进货量',type: 'line'},
                ]
              });
            }
          })
        },
        obtainCenterCharts(serverCode){
          this.centerCharts = echarts.init(document.getElementById('centerCharts'));
          let user = JSON.parse(window.sessionStorage.getItem("user"));
          let form = new FormData;
          let win = this;
          form.append("account", user.userName);
          form.append("server-code", serverCode);
          this.$http.post("/api/history/obtain/history/stock", form).then(function (response) {
            if(response.data !== null){
              win.centerCharts.setOption({
                title:{
                  text:'商品销售量比例',
                },
                legend: {
                  top: 'bottom'
                },
                dataset:{
                  dimensions:[
                    {name: 'name'},
                    {name: 'value'}
                  ],
                },
                toolbox: {
                  show: true,
                  feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                  }
                },
                series: [
                  {
                    name: '面积模式',
                    type: 'pie',
                    radius: [20, 100],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                      borderRadius: 8
                    },
                    data: response.data,
                  }
                ]
              });
            }
          });
        },
        obtainRightCharts(serverCode){
          this.rightCharts = echarts.init(document.getElementById('rightCharts'));
          let user = JSON.parse(window.sessionStorage.getItem("user"));
          let form = new FormData;
          let win = this;
          form.append("account", user.userName);
          form.append("server-code", serverCode);
          this.$http.post("/api/history/obtain/history/price", form).then(function (response) {
            if (response.data !== null){
              win.rightCharts.setOption({
                title:{
                  text:'商品销售额'
                },
                legend: {
                  top: 'bottom'
                },
                dataset:{
                  dimensions: [{name : 'name'},{name:'value'  }],
                  source:response.data,
                },
                xAxis: {
                  type: 'category'
                },
                yAxis: {
                  type: 'value'
                },
                series: [{type: 'bar'}]
              });
            }
          });
        }
      },
      mounted() {
        // 初始化用户服务器本身的地址
        var user = JSON.parse(window.sessionStorage.getItem("userInform"));
        this.servePosition.longitude = user.longitude;
        this.servePosition.latitude = user.latitude;
        this.servePosition.detail = user.detail;
        // 初始化绘制地图页面
        this.initMap();
        // 初始化子服务端
        this.clientFinderFunc();
      },
      beforeDestroy() {
        // 销毁地图
        this.map.destroy();
      },
    }
</script>

<style scoped>
  .c-el-row{
    height: 620px;
  }
  .charts-style{
    width:400px;
    height: 250px;
  }
</style>
